<style lang='less' scoped>
    .cell{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #fff;
        color: #333;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        padding: 0 20px;
        border-bottom: 1px solid #e5e5e5;
        .cell-info{
            flex: 1;
            color: #666;
            padding-left: 20px;
        }
        .icon{
            display: inline-block;
            margin-top: 15px;
            width: 25px;
            height: 25px;
        }
        
        .cellIcon{
            width: 30px;
            height: 30px;
            display: block;
        }
    }
</style>
<template>
    <div class="cell" @click="clickItem(cellInfo)">
       <span class="iconfont " :class="[cellIcon]"></span>
       <div class="cell-info text-14 ">{{cellInfo}}</div>
       <img  class="icon" :src="deo"/>
    </div>
</template>

<script>
import deo from '@/assets/images/deo.png'
export default {
    props:{
        cellIcon:{
            default:'',
            required:false,
            type:String
        },
        cellInfo:{
            default:'',
            type:[String,Number]
        }
    },
    data(){
        return {
            deo:deo,
        }
    },
    methods: {
        clickItem(info){
            this.$emit('clickItem',info)
        }
    },
  
     mounted() {
        console.log(this.cellInfo)
        console.log(555)
    },
}
</script>
